<template>
    <div id="box">
        <van-goods-action>
            <!-- <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
            <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" /> -->数量
             <van-stepper v-model="value" style="margin-left:0.1rem"/>
            <van-goods-action-button color="#536387"
                type="danger"
                text="加入购物车"
                @click="onClickButton"
            />
        </van-goods-action>
        <van-popup v-model="show" class="content" style="border-radius:0.2rem">
          <div>确定添加<span>{{value}}</span>张门票到购物车?</div>
          <p><button style="background:#536387;color:#fff" @click="onClickIcon">确定</button>
          <button @click="onClickButton">取消</button></p>
        </van-popup>
    </div>
</template>

<script>
import axios from "axios";
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);

export default {
  name: "Bottom",
  data() {
    return {
      show: false,
      value: 1,
      num:""
    };
  },
  methods: {
    onClickIcon() {
      this.num=this.$route.params.id ||this.$route.query.num;
       if(localStorage.getItem("name")){
         let name=localStorage.getItem("name")
        this.num=this.$route.params.id ||this.$route.query.num;
        // axios.defaults.headers = {
        //   "Content-type": "application/x-www-form-urlencoded"
        // };
        axios({
          url: "/shopcar",
          method: "get",
          params: {
            userid: name,
            shopid:this.num,
            number: this.value
          }
        }).then(res => {
          console.log(res.data);
          if(res.data==1){
            Toast.success('添加成功');
          }else{
            Toast.success('添加失败');
          }
        });
        this.show=false;
      }else{
        this.$router.push({ path: '/Login'})
      }
    },
    onClickButton() {
      this.show = !this.show;
    }
  }
};
</script>

<style scoped>
#box {
  margin-left: 0.1rem;
  font-size: 0.15rem;
  color: #536387;
  font-weight: bold;
}
/* .van-goods-action{
  color: #536387
} */
.content {
  width: 3rem;
  height: 2rem;
  font-size: 0.2rem;
  color: #000;
}
.content div {
  width: 100%;
  font-size: 0.2rem;
  text-align: center;
  margin-top: 0.5rem;
  font-weight: normal;
}
.content div span{
  font-size: 0.2rem;
  color: #536387;
  padding: 0 0.05rem;
  font-weight: bold;
}
.content p {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.3rem;
  width: 100%;
}
.content p button {
  font-size: 0.2rem;
  margin: 0 0.3rem;
  padding: 0.1rem 0.2rem;
  border: none;
  outline: none;
  border-radius: 0.1rem;
}
</style>
